<template>
  <div :class="width === '3' ? 'row3' : width === '2' ? 'row2' : 'row'">
    <div
      class="left-row"
      :class="borderTop ? '' : 'borderTop'"
      :style="borderLeft ? 'border-left: none' : ''"
    >
      <div class="label">{{ label }}</div>
    </div>
    <div class="right-row borderNone" :class="borderTop ? '' : 'borderTop'">
      <div class="img" v-if="type == 'img'">
        <el-image
          v-for="(item, index) in content"
          :key="index"
          style="
            width: 90px;
            height: 90px;
            margin: 5px 10px 5px 0;
            border-radius: 4px;
          "
          :src="item"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="content"
          :initial-index="index"
          fit="cover"
        />
      </div>
      <div class="file" v-else-if="type == 'file'">
        <div v-for="(item, index) in content" :key="index" class="fileItem">
          {{ item.name }}
        </div>
      </div>
      <div v-else-if="type == 'slot'" :class="center ? 'flex-center1' : ''">
        <slot name="slot"></slot>
      </div>
      <div class="content" :style="color ? `color:${color}` : ''" v-else>
        {{ content }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import './index.scss'
import { ref, onMounted, defineProps, defineEmits, computed } from 'vue'
const props = defineProps({
  label: String, //标题
  content: String || Array, //内容  可传字符串和数组
  color: String, //字体颜色
  type: String, //内容类型  img:图片  file:文件  不传:文本
  width: String, //宽度
  borderTop: Boolean, //是否有上边框线
  borderLeft: Boolean,
  center: Boolean //是否文本居中
})

const emit = defineEmits([
  'update:label',
  'update:content',
  'update:color',
  'update:type',
  'update:width',
  'update:borderTop',
  'update:borderLeft',
  'update:center'
])

const label = computed({
  get: () => props.label,
  set: (val) => emit('update:label', val)
})

const content = computed({
  get: () => props.content,
  set: (val) => emit('update:content', val)
})

const color = computed({
  get: () => props.color,
  set: (val) => emit('update:color', val)
})

const type = computed({
  get: () => props.type,
  set: (val) => emit('update:type', val)
})

const width = computed({
  get: () => props.width,
  set: (val) => emit('update:width', val)
})

const borderTop = computed({
  get: () => props.borderTop,
  set: (val) => emit('update:borderTop', val)
})

const borderLeft = computed({
  get: () => props.borderLeft,
  set: (val) => emit('update:borderLeft', val)
})

const center = computed({
  get: () => props.center,
  set: (val) => emit('update:center', val)
})
</script>
